import ReactDOM from 'react-dom'
import React, { Component } from 'react'

class App extends Component {
  // 受控组件：通过state中的数据控制表单元素
  state = {
    mobile: 13211112222,
    isAgree: true
  }

  changeMobile = e => {
    this.setState({
      mobile: e.target.value
    })
  }

  render() {
    return (
      <div>
        <div>
          <input
            value={this.state.mobile}
            onChange={this.changeMobile}
            type="text"
            placeholder='输入手机号' />
        </div>
        <div>
          <input
            checked={this.state.isAgree}
            onChange={(e) => this.setState({ isAgree: e.target.checked })}
            type="checkbox"
          />
          请同意用户隐私
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
